.photographic_mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    padding: 52px 124px;
    box-sizing: border-box;
    display: none;
}
.photographic_mask .photographic_left{
    position: absolute;
    top: 52px;
    left: 0;
    bottom: 52px;
    width: 124px
}
.photographic_mask .photographic_left>div{
    position: absolute;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    background-repeat: no-repeat;
    background-position: center center;
}
.photographic_mask .photographic_left .photographic_left_cancel{
    top: 106px;
    background-image: url("./icon/delete.png");
    -o-background-image: url("./icon/delete.png");
    -moz-background-image: url("./icon/delete.png");
    -webkit-background-image: url("./icon/delete.png");
}
.photographic_mask .photographic_left .photographic_left_sure{
    display: none;
    bottom: 106px;
    background-image: url("./icon/sure.png");
    -o-background-image: url("./icon/sure.png");
    -moz-background-image: url("./icon/sure.png");
    -webkit-background-image: url("./icon/sure.png");
}

.photographic_mask .photographic_body{
    width: 100%;
    height: 100%;
    background: #434847;
}
.photographic_mask .photographic_body>video{
    width: 100%;
    height: 100%;
    display: none;
}
.photographic_mask .photographic_body>canvas{
    width: 100%;
    height: 100%;
    display: none;
}
.photographic_mask .photographic_body>img{
    width: 100%;
    height: 100%;
    display: none;
    border: none;
}
.photographic_mask .photographic_body.active>video{
    display: inline-block;
}
.photographic_mask .photographic_body.done>img{
    display: inline-block;
}

.photographic_mask .photographic_right{
    position: absolute;
    top: 52px;
    right: 0;
    bottom: 52px;
    width: 124px
}
.photographic_mask .photographic_right .photographic_left_photo{
    position: absolute;
    top: 50%;
    right: 50%;
    width: 97px;
    height: 97px;
    margin-top: -48.5px;
    margin-right: -48.5px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("./icon/photographic.png");
    -o-background-image: url("./icon/photographic.png");
    -moz-background-image: url("./icon/photographic.png");
    -webkit-background-image: url("./icon/photographic.png");
}
.photographic_mask .photographic_right .photographic_left_photo.active{
    background-image: url("./icon/photographicactive.png");
    -o-background-image: url("./icon/photographicactive.png");
    -moz-background-image: url("./icon/photographicactive.png");
    -webkit-background-image: url("./icon/photographicactive.png");
}